<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- 百度压缩版引用地址: -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- 微软压缩版引用地址: -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/comment.css">
    <link rel="stylesheet" href="../css/pingji_list.css">
    <link rel="stylesheet" href="../css/pingji_order.css">
</head>

<body>
    <div class="nav">
        <div class="head">
            <div class="head-img">
                <img src="../image/head1.jpeg" alt="ggggg" class="img">
            </div>
        </div>
        <div class="funcBar">
            <div class="choice">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="container-left">
            <div class="card">
                <div class="head-image">
                    <img src="../image/head2.jpeg" alt="g" id="head-image">
                </div>
                <div id="user-name-div">
                    <div id="user-name"><b id="name">个人练习生</b></div>
                </div>
                <div id="card-bottom">
                </div>
            </div>
            <div class="card-upload" >                
                <form action="http://loaclhost:8081/upload" method="POST" enctype="multipart/form-data" id="form" width="300px">
                    <label for="image" margin="100px">上传图片：</label>
                    <input type="file" name="image" id="image" accept="image/*"><br><br>
                    <label for="auth_requirement">认证需求：</label>
                    <!-- <input type="text" name="auth_requirement" id="auth_requirement"><br><br> -->
                    <textarea name="auth_requirement" id="auth_requirement" cols="22" rows="10"></textarea>
                    <input type="text" name="id" class="hidden-id" id="hidden-id">
                    <input type="submit" value="提交" id="submit">
                    <select name="select_pingji" id="select_pingji">
                    </select>
                </form>
<style>
    #select_pingji{
        width: 120px;
    }
</style>
            </div>
            <div class="card-upload2">
                <form action="http://localhost:8081/delete" method="POST" id="form-del" enctype="application/x-www-form-urlencoded">
                    输入id<input type="text" id="del" name="id">
                    <input type="submit" id="del-button" value="删除">
                    <input type="text" name="userId" class="hidden-id" id="hidden-userid">
                </form>
                <form action="http://localhost:8081/shensu" method="POST" id="form-shensu" enctype="application/x-www-form-urlencoded">
                    输入id<input type="text" id="shensu" name="id">
                    <input type="submit" id="shensu-button" value="申诉">
                    <input type="text" name="userId" class="hidden-id" id="hidden-userid-s">
                </form>
            </div>
        </div>

        <div class="container-right">
            <table>
                <thead>
                  <tr>
                    <th>订单ID</th>
                    <th>图片</th>
                    <th>状态</th>
                    <th>描述</th>
                    <th>结果</th>
                  </tr>
                </thead>
                <tbody id="tbody">  
                </tbody>
              </table>
            
        </div>
    </div>
    <script>
        
        let host = "http://localhost:8081/";
        getPingJierList();
        var search = document.location.search;
        let id = search.substring(1).split('=')[1];
        document.querySelector(".hidden-id").value=id;
        document.querySelector("#hidden-userid").value=id;
        document.querySelector("#hidden-userid-s").value=id;
        console.log("debug");
        let user = getUserById(id);
        let name_id=document.querySelector("#name");
        name_id.innerHTML=user.name;
        console.log(name_id);

        let response=getOrderById(id);
        console.log(response);
        //得到返回的订单
        let tbody=document.querySelector("#tbody");
        let errCode=response.code;
        let list=response.list;
        let count=response.length;
        if(errCode==-1){
            alert('id is null');
        }
        else{
            //id 不为null
            for(let i=0;i<count;i++){      
                let order = list[i];
                console.log(order);
                createOrderLine(order);
            }
        }
        function createOrderLine(order){
            let tr=document.createElement("tr");
            let td=new Array();
            for(let i=0;i<5;i++){
                td[i]=document.createElement("td");
                tr.appendChild(td[i]);
            }
            td[0].innerHTML=order.id;
            let img=document.createElement("img");
            let pathpre="http://localhost:8081/";
            img.src=pathpre + order.path;
            img.className='img';
            td[1].appendChild(img);
            td[2].innerHTML=order.status;
            td[3].innerHTML=order.desc;
            if(order.result==null){
                td[4].innerHTML='暂无';
            }
            else{
                td[4].innerHTML=order.result;
            }
            // alert(order.result);
            tbody.appendChild(tr);
        }

        function getOrderById(id){
            let list;
            $.ajax({
                url:host+"query/all",
                type:"get",
                data:'id='+id,
                dataType:'json',
                async:false,
                success:function(data){
                    list=data;
                    console.log(data);
                },
                error:function(data){
                    alert("response error")
                }
            })
            return list;
        }

        function getPingJierList(){
            $.ajax({
                url:host+"all_pingjier",
                type:"get",
                dataType:'json',
                success:function(data){
                    let select=document.querySelector("#select_pingji");
                    let count=data.count;
                    let list=data.list;
                    for(let i=0;i<count;i++){
                        let option=document.createElement("option");
                        option.value=list[i].id;
                        option.innerHTML="id:"+list[i].id+" "+list[i].name;
                        select.appendChild(option);
                    }
                },
                error:function(){}
            })
        }


        function getUserById(id){
            let user;
            $.ajax({
                url:host+"query",
                type:"get",
                data:'id='+id,
                dataType:'json',
                async: false,
                success:function(data){
                    user={'id':data.id,'name':data.name,'isVIP':data.isVIP}
                    if(data.isVIP=='true'){
                        document.location.href=host+'html/pingji_list.html?id='+user.id;
                    }
                    console.log(user);
                    console.log(data);
                },
                error:function(data){
                    console.log(data);
                }
            })
            return user
        }

    </script>
</body>

</html>